<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<title>SEED</title>

<head th:include="header"/>

<body>
<div id="main_contain">
    <el-row class="container">
        <el-col :span="24" class="el-col el-col-24 header">
            <el-col :span="10" class="el-col el-col-10 logo logo-width"
                    :class="collapsed?'logo-collapse-width':'logo-width'">
                <span v-if="!collapsed" sec:authentication="name"></span>
            </el-col>
            <el-col :span="10">
                <div class="tools" @click.prevent="collapse">
                    <i class="el-icon-menu "></i>
                </div>
            </el-col>
            <el-col :span="4" class="userinfo">
                <!--<el-dropdown trigger="hover">-->
                <!--<span class="el-dropdown-link userinfo-inner">-->
                <!--<img :src="this.sysUserAvatar"/> {{sysUserName}}-->
                <!--</span>-->
                <!--&lt;!&ndash;<el-dropdown-menu slot="dropdown">&ndash;&gt;-->
                <!--&lt;!&ndash;&lt;!&ndash;<el-dropdown-item>我的消息</el-dropdown-item>&ndash;&gt;&ndash;&gt;-->
                <!--&lt;!&ndash;&lt;!&ndash;<el-dropdown-item>设置</el-dropdown-item>&ndash;&gt;&ndash;&gt;-->
                <!--&lt;!&ndash;<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>&ndash;&gt;-->
                <!--&lt;!&ndash;</el-dropdown-menu>&ndash;&gt;-->
                <!--</el-dropdown>-->
                <!--<i class="el-icon-share" >退出登录</i>-->
                <el-button type="primary" size="small" @click.native="logout">退出登录</el-button>
            </el-col>
        </el-col>
        <el-col :span="24" class="main">
            <aside :class="collapsed ? 'menu-collapsed' : 'menu-expanded'">
                <!--导航菜单-折叠前-->
                <el-menu class="el-menu-vertical-demo" unique-opened v-show="!collapsed">
                    <menu-item :item="item" v-for="item in menuList" :key="item.name"></menu-item>
                </el-menu>

                <!--导航菜单-折叠后-->
                <ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
                    <menu-item-hide :item="item" v-for="item in menuList" :key="item.name"></menu-item-hide>
                </ul>
            </aside>

            <!--内容展示区域-->
            <section class="content-container">
                <el-col v-if="!pageLoadInTag" :span="24" class="breadcrumb-container">
                    <strong class="title">{{title}}</strong>
                    <el-breadcrumb separator="/" class="breadcrumb-inner">
                    </el-breadcrumb>
                </el-col>
                <el-col :span="24" class="content-wrapper">
                    <el-tabs v-if="pageLoadInTag" v-model="editableTabsValue" type="card" closable
                             @tab-remove="removeTab">
                        <el-tab-pane v-for="(tab, index) in editableTabs" :key="tab.id" :label="tab.name"
                                     :name="tab.id + ''">
                            <el-col :span="24" :id="'tab-content-' + tab.id"></el-col>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </section>

        </el-col>
    </el-row>

</div>
<script th:src="@{/js/common/index.js}"></script>

</body>
</html>